window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
  // 创建数据
  var data = [
    {
      id: 1,
      name: "张三",
      age: "20岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 2,
      name: "李四",
      age: "23岁",
      address: "四川省成都市",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 3,
      name: "王五",
      age: "23岁",
      address: "四川省成都市华阳街道",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 4,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "感染者",
      status: "待审核",
    },
    {
      id: 5,
      name: "二麻子",
      age: "28岁",
      address: "浙江省宁波市镇海区",
      data: "2022-8-20",
      events: "患病者",
      status: "待审核",
    },
    {
      id: 6,
      name: "晓虹",
      age: "18岁",
      address: "四川省郫都区",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 7,
      name: "小米",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-21",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 8,
      name: "小麦",
      age: "33岁",
      address: "四川神成都市高新区",
      data: "2022-8-21",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 9,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 10,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 11,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 12,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 13,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 14,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 15,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 16,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 17,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 18,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 19,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 20,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
    {
      id: 21,
      name: "张三1",
      age: "23岁",
      address: "四川省成都市双流区华阳街道1-3-7",
      data: "2022-8-20",
      events: "密切接触患者",
      status: "待审核",
    },
  ];
  // 获取元素
  var page = 1; //当前的页码
  var pageCount = 6; //每一页的数据量
  var oTbody = document.querySelector("tbody");
  var searchBtn = document.querySelector(".searchBtn"); //搜索按钮
  var searchInp = document.querySelector(".searchInp"); //输入框
  var pagination = document.querySelector(".pagination"); //页码容器
  var prev = document.querySelector(".prev");
  var next = document.querySelector(".next");
  var addBtn = document.querySelector(".addBtn"); //新增按钮
  var editChangeBtn = document.querySelector(".editChangeBtn"); //保存
  var forms = document.querySelector(".addFrom"); //新增表单
  var inp = document.querySelectorAll(".addFrom #addModal input"); //新增下面所有的input

  // 表单验证
  var rules = {
    // 账号
    id: {
      reg: /^\d{1,5}$/,
      info: "请输入正确的账号信息",
    },
    // 姓名
    name: {
      reg: /^([\u4e00-\u9fa5]{2,6})$/,
      info: "请输入2-6位中文姓名",
    },
    // 年龄
    age: {
      reg: /^([0-9]\d|100)$/,
      info: "年龄过大",
    },
    // 地址
    address: {
      reg: /^([\u4e00-\u9fa5]{6,34})$/,
      info: "请输入具体的地址",
    },
    // 日期
    data: {
      reg: /^(\d{4})([-])(\d{2})([-])(\d{2})$/,
      info: "格式有误：2022-08-21",
    },
    // 事件
    events: {
      reg: /^([\u4e00-\u9fa5]{2,34})$/,
      info: "请输入突发事件名称",
    },
    // 手机号
    // tel: {
    //     reg: /^(1[3-9]\d{9})$/,
    //     info: '请输入11位有效的电话号码'
    // },
  };
  // 封装函数(页面重新加载)
  function reload() {
    // 1、关于搜索
    var searchContent = searchInp.value; //获取搜索框的内容
    var newSearchContent = [];
    for (var i = 0; i < data.length; i++) {
      //循环遍历得到所有的数据
      if (searchContent.trim() == "") {
        //如果搜索的内容为空则展示出所有数据
        newSearchContent = data;
      } else {
        //模糊查找内容，只要满足一部分条件即可查找
        if (
          data[i].name.includes(searchContent) ||
          data[i].address.includes(searchContent) ||
          data[i].data.includes(searchContent) ||
          data[i].events.includes(searchContent) ||
          data[i].status.includes(searchContent)
        ) {
          newSearchContent.push(data[i]); //将查找的数据放入到新的数组中
        }
      }
    }
    // 2、关于数据的插入
    oTbody.innerHTML = ""; //刚开始页面为空
    // 第一页展示的数据：    1-6
    // 第二页展示的数据：    7-12
    // 第三页展示的数据：    13-18    ==>  (page - 1) *一页可展示的内容，page*一页可展示的内容
    var pageDataShow = newSearchContent.slice(
      (page - 1) * pageCount,
      page * pageCount
    );
    for (var i = 0; i < pageDataShow.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
      <td>${pageDataShow[i].id}</td>
      <td>${pageDataShow[i].name}</td>
      <td>${pageDataShow[i].age}</td>
      <td>${pageDataShow[i].address}</td>
      <td>${pageDataShow[i].data}</td>
      <td>${pageDataShow[i].events}</td>
      <td>${pageDataShow[i].status}</td>
      <td>
       <button type="button" class="btn btn-info edit" data-toggle="modal" data-target="#editModal">编辑</button>
       <button type="button" class="btn btn-success pass">审核通过</button>
       <button type="button" class="btn btn-warning handel">上门处理</button>
       <button type="button" class="btn btn-danger delete">删除</button>
       </td>
      `;
      oTbody.appendChild(oTr);
    }
    // 关于页码的自动生成
    var pageBtn = document.querySelectorAll(".pageBtn"); //页码按钮
    // 删除所有的页码
    for (var i = 0; i < pageBtn.length; i++) {
      pagination.removeChild(pageBtn[i].parentNode);
    }
    // 根据数据的总量自动生成页码
    for (var i = 1; i <= Math.ceil(newSearchContent.length / pageCount); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a href="#" class = 'pageBtn'>${i}</a>`;
      // 如果当前的页码和i相同，那么就展示出默认样式
      if (page == i) {
        oLi.classList.add("active");
      }
      // 将li插入到ul的最后一个元素的前面  也就是插入到中间的位置（左右两边分别是左、右按钮）
      pagination.insertBefore(oLi, pagination.lastElementChild);
    }
  }
  // 当页面一加载的时候就展示出所有的数据
  reload();
  // 当点击搜索的时候
  searchBtn.addEventListener("click", function () {
    page = 1; //搜索出来的数据从第一页开始展示
    reload();
  });
   // 当按下回车键的时候
   searchInp.addEventListener('keyup',function () { 
    // console.log(keyCode)
    if(event.keyCode == 13){
      page = 1;
      reload();
    }
    event.preventDefault();
   })
  // 当点击分页按钮的时候，利用事件委托
  pagination.addEventListener("click", function () {
    if (event.target.className == "pageBtn") {
      page = event.target.innerText; //当前页码渲染的内容与点击的页码有关
      reload();
    }
  });
  // 当点击左右分页按钮的时候
  prev.addEventListener("click", function () {
    if (page > 1) {
      page--;
      reload();
    }
  });
  next.addEventListener("click", function () {
    if (page < Math.ceil(data.length / pageCount)) {
      page++;
      reload();
    }
  });
  // 当点击删除、审核通过、上门处理的时候,事件委托给tbody
  oTbody.addEventListener("click", function () {
    // 删除
    if (event.target.className.includes("delete")) {
      var id = event.target.parentNode.parentNode.children[0].innerText; //根据id删除相应的行
      // console.log(id);
      // 循环遍历拿到所有的数据
      for (var i = 0; i < data.length; i++) {
        // 如果点击的元素和该行的id相同，那么就删除这一行
        if (data[i].id == id) {
          var confirms = confirm('确认删除'+ data[i].name + '吗?');
          if(confirms){
            data.splice(i, 1); //data是数组对象
          }
        } 
      }
      reload();
    }
    // 审核通过
    if (event.target.className.includes("pass")) {
      var id = event.target.parentNode.parentNode.children[0].innerText;
      // console.log(id)
      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          // event.target.parentNode.previousElementSibling.innerHTML = "审核通过";
          // event.target.parentNode.previousElementSibling.classList.add("passSuccess");
          // console.log(event.target.parentNode.previousElementSibling.innerHTML);
          // 上面的写法是错误的！！！
          data[i].status = "审核通过";
        }
      }
      reload();
    }
    // 上门处理
    if (event.target.className.includes("handel")) {
      var id = event.target.parentNode.parentNode.children[0].innerText;
      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          // event.target.parentNode.previousElementSibling.innerText = "上门处理";
          // event.target.parentNode.previousElementSibling.classList.add("deal");
          data[i].status = "上门处理";
        }
      }
      reload();
    }
  });
  // 当表单里的input失去焦点的时候
  for (var i = 0; i < inp.length; i++) {
    inp[i].addEventListener("blur", function () {
      var str = this.value;
      if (str.trim() == "") {
        this.parentNode.nextElementSibling.innerHTML = "内容不能为空";
        this.parentNode.nextElementSibling.classList.add("red");
      } else if (rules[this.name].reg.test(str) == false) {
        this.parentNode.nextElementSibling.innerHTML = rules[this.name].info;
        this.parentNode.nextElementSibling.classList.add("red");
      } else {
        this.parentNode.nextElementSibling.innerHTML = "√";
        this.parentNode.nextElementSibling.classList.add("right");
      }
    });
  }
  // 当提交表单的时候
  forms.addEventListener("submit", function () {
    var temp = true;
    for (var j = 0; j < inp.length; j++) {
      var str = inp[j].value;
      if (str.trim() == "") {
        inp[j].parentNode.nextElementSibling.innerHTML = "内容不能为空";
        inp[j].nextElementSibling.classList.add("red");
        temp = false;
      } else if (rules[this.name].reg.test(str) == false) {
        inp[j].parentNode.nextElementSibling.innerHTML =
          rules[inp[j].name].info;
        inp[j].parentNode.nextElementSibling.classList.add("red");
        temp = false;
      } else {
        inp[j].parentNode.nextElementSibling.innerHTML = "√";
        inp[j].parentNode.nextElementSibling.classList.add("right");
      }
    }
    if (temp == false) {
      event.preventDefault();
      $("#addModal").modal("show"); // 隐藏模态框
    }
  });
   // 当点击新增的时候
   addBtn.addEventListener("click", function () {
    // 获取所有的value值
    var addId = document.querySelector(".addId").value;
    var addName = document.querySelector(".addName").value;
    var addAge = document.querySelector(".addAge").value;
    var addAddress = document.querySelector(".address").value;
    var addData = document.querySelector(".data").value;
    var addEvents = document.querySelector(".events").value;
    // 将获取的值重新赋值给原来的data
    data.push({
      id: addId,
      name: addName,
      age: addAge,
      address: addAddress,
      data: addData,
      events: addEvents,
      status: "待处理",
    });
    reload();
    $("#addModal").modal("hide"); // 隐藏模态框
  });

  // 当点击编辑的时候
  oTbody.addEventListener("click", function () {
    if (event.target.className.includes("edit")) {
      // console.log(event.target.className)
      var id = event.target.parentNode.parentNode.children[0].innerText;
      for (var i = 0; i < data.length; i++) {
        // 将数据里面的内容渲染到弹出框中
        if (data[i].id == id) {
          document.querySelector(".editId").value = data[i].id;
          document.querySelector(".editName").value = data[i].name;
          document.querySelector(".editAge").value = data[i].age;
          document.querySelector(".editAddress").value = data[i].address;
          document.querySelector(".editData").value = data[i].data;
          document.querySelector(".editEvents").value = data[i].events;
        }
      }
    }
  });
  // 当点击保存的时候，也就是将上面获取的值重新再添加到数据中
  editChangeBtn.addEventListener("click", function () {
    // 获取当前编辑的id
    var id = document.querySelector(".editId").value;
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data[i].id = document.querySelector(".editId").value;
        data[i].name = document.querySelector(".editName").value;
        data[i].age = document.querySelector(".editAge").value;
        data[i].address = document.querySelector(".editAddress").value;
        data[i].data = document.querySelector(".editData").value;
        data[i].events = document.querySelector(".editEvents").value;
      }
    }
    $("#editModal").modal("hide");
    reload();
  });
};
